<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { usePageScroll } from "@/hooks/scroll";
import { useList } from "@/hooks/page";
import { info_api, news_api } from "@/package/guider/api/guider_associate";
import { Router } from "@/utils/router";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavSpace from "@/components/nav/space.vue";
import IndexMenuTitle from "@/pages/index/components/index-menu-title.vue";
import ListMore from "@/components/list/more.vue";
import PopupCenter from "@/components/popup/center.vue";
import IconClose from "@/components/icon/close.vue";

onLoad((options) => {
  useQuery<{ id: string }>(options as MiniApp.AppLaunchOption, (query) => {
    info_api({ id: query.id }).then((resp) => {
      adList.value = resp.pics;
      infoData.icon = resp.icon;
      infoData.name = resp.name;
      infoData.address = resp.address;
      infoData.contact = resp.contact;
      infoData.desc = resp.desc;
      memberList.value = resp.members;

      shareOption.title = resp.name;
    });

    tempData.id = query.id;
    reloadList();

    shareOption.data = { id: query.id };
  });
});
const { pageIsScroll, onPageScroll } = usePageScroll(() => {
  listLoadMore.value = listData.value.length > 1;
});
onReachBottom(() => loadMoreList());

const adList = ref<string[]>([]);
const infoData = reactive({
  icon: "",
  name: "",
  address: "",
  contact: "",
  desc: "",
  isExpand: false,
});

const phoneClick = () => {
  uni.makePhoneCall({ phoneNumber: infoData.contact });
};

const memberVisible = ref(false);
const memberData = reactive({
  visible: false,
  headimg: "",
  name: "",
  position: "",
  desc: "",
});
const memberList = ref<any[]>([]);
const memberClick = (index: number) => {
  const member = memberList.value[index];
  memberData.headimg = member.headimg;
  memberData.name = member.name;
  memberData.position = member.position;
  memberData.desc = member.desc;
  memberVisible.value = true;
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 20 }, (query) => {
    return news_api({ ...query, associate_id: tempData.id });
  });

const newsClick = (id: string) => {
  Router.navigateTo(`/package/guider/pages/association/news?id=${id}`);
};

const tempData = { id: "" };

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/guider/pages/association/detail"
);
</script>

<template>
  <NavBack />
  <NavBar />
  <NavSpace />

  <view class="detail-ad">
    <swiper class="detail-ad-swipe" circular autoplay>
      <swiper-item v-for="i of adList" :key="i">
        <image class="detail-ad-img" :src="i" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <view class="detail-ad-mask"></view>
  </view>

  <view class="detail-info">
    <view style="display: flex">
      <image class="detail-info-img" :src="infoData.icon" mode="aspectFill" />
      <view style="flex-grow: 1; min-width: 0">
        <view class="detail-info-name">{{ infoData.name }}</view>
        <view class="detail-info-address">
          <image
            class="detail-info-address2"
            src="@/package/guider/static/association-position.png"
          />
          <view class="detail-info-address3">{{ infoData.address }}</view>
          <!-- <image
            class="detail-info-address4"
            src="@/package/guider/static/association-arrow2.png"
          /> -->
        </view>
        <view class="detail-info-address" @click="phoneClick">
          <image
            class="detail-info-address2"
            src="@/package/guider/static/association-phone.png"
          />
          <view class="detail-info-address3">{{ infoData.contact }}</view>
          <image
            class="detail-info-address4"
            src="@/package/guider/static/association-arrow2.png"
          />
        </view>
      </view>
    </view>
    <view class="detail-info-wrapper">
      <view
        class="detail-info-content"
        :style="{ display: infoData.isExpand ? '' : '-webkit-box' }"
        @click="infoData.isExpand = !infoData.isExpand"
      >
        {{ infoData.desc }}
      </view>
      <view
        class="detail-info-expand"
        v-if="infoData.desc.length > 72 && !infoData.isExpand"
        @click="infoData.isExpand = true"
      >
        展开
      </view>
    </view>
  </view>

  <view class="detail-member">
    <view class="detail-member-title">
      <IndexMenuTitle title="协会主要成员" />
    </view>
    <view class="detail-member-wrapper">
      <scroll-view
        class="detail-member-data"
        scroll-x
        enhanced
        :show-scrollbar="false"
      >
        <!-- <view class="detail-member-space"></view> -->
        <view
          class="detail-member-item"
          v-for="(i, d) of memberList"
          :key="i.id"
          @click="memberClick(d)"
        >
          <image
            class="detail-member-avatar"
            :src="i.headimg"
            mode="aspectFill"
          />
          <view class="detail-member-position">
            <image
              class="detail-member-position2"
              v-if="i.position === '会长'"
              src="@/package/guider/static/association-star.png"
            />
            <view class="detail-member-position3">{{ i.position }}</view>
          </view>
          <view class="detail-member-name">{{ i.name }}</view>
        </view>
      </scroll-view>
    </view>
  </view>

  <view class="detail-data">
    <view class="detail-data-title">
      <IndexMenuTitle title="协会专栏" />
    </view>

    <view class="detail-data-wrapper">
      <view
        class="detail-data-item"
        v-for="i of listData"
        :key="i.id"
        @click="newsClick(i.id)"
      >
        <view class="detail-data-content">
          <view class="detail-data-name">{{ i.title }}</view>
          <view class="detail-data-date">{{ i.cdate }}</view>
        </view>
        <image
          class="detail-data-img"
          v-if="i.pic_url"
          :src="i.pic_url"
          mode="aspectFill"
        />
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>

  <PopupCenter v-model="memberVisible" :showClose="false">
    <view class="popup-member">
      <view class="popup-member-info">
        <image
          class="popup-member-avatar"
          :src="memberData.headimg"
          mode="aspectFill"
        />
        <view style="flex-grow: 1; min-width: 0">
          <view class="popup-member-name">{{ memberData.name }}</view>
          <view class="popup-member-position">
            <image
              class="popup-member-position2"
              v-if="memberData.position === '会长'"
              src="@/package/guider/static/association-star.png"
            />
            <view class="popup-member-position3">
              {{ memberData.position }}
            </view>
          </view>
        </view>
      </view>
      <view class="popup-member-title">
        <view style="position: relative">
          <view class="popup-member-title2"></view>
          <view class="popup-member-title3">个人简介</view>
        </view>
      </view>
      <view class="popup-member-intro">{{ infoData.desc }}</view>
      <view class="popup-member-close" @click="memberVisible = false">
        <IconClose color="#ffffff" />
      </view>
    </view>
  </PopupCenter>
</template>

<style lang="scss">
page {
  padding-top: 170rpx;
}

.detail-ad {
  position: absolute;
  left: 0;
  top: 0;
  width: 750rpx;

  .detail-ad-swipe {
    height: 430rpx;
  }

  .detail-ad-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .detail-ad-mask {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 130rpx;
    background: linear-gradient(180deg, rgba(239, 239, 239, 0), #f9f9f9);
  }
}

.detail-info {
  position: relative;
  padding: 30rpx 20rpx;
  margin: 0 30rpx 50rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .detail-info-img {
    flex-shrink: 0;
    width: 136rpx;
    height: 136rpx;
    margin-right: 20rpx;
    border-radius: 50%;
  }

  .detail-info-name {
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .detail-info-address {
    display: flex;
    align-items: center;
    margin-top: 12rpx;
  }

  .detail-info-address2 {
    flex-shrink: 0;
    width: 20rpx;
    height: 20rpx;
  }

  .detail-info-address3 {
    min-width: 0;
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-info-address4 {
    flex-shrink: 0;
    width: 24rpx;
    height: 24rpx;
    margin-left: 8rpx;
  }

  .detail-info-wrapper {
    position: relative;
    padding: 40rpx 10rpx 0;
  }

  .detail-info-content {
    font-size: 26rpx;
    color: #666666;
    line-height: 44rpx;
    // display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-info-expand {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2.2em;
    font-size: 26rpx;
    color: #ff7900;
    line-height: 44rpx;
    text-align: right;
    background-color: #ffffff;
  }
}

.detail-member {
  margin: 0 30rpx 50rpx;

  .detail-member-title {
    margin-bottom: 40rpx;
  }

  .detail-member-wrapper {
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  .detail-member-data {
    width: 100%;
    height: 266rpx;
    white-space: nowrap;
  }

  .detail-member-item {
    display: inline-block;
    width: 172rpx;
    margin-top: 20rpx;
    margin-right: 4rpx;
    vertical-align: top;
  }

  .detail-member-avatar {
    display: block;
    width: 132rpx;
    height: 132rpx;
    margin: 0 auto 10rpx;
    border-radius: 30rpx;
  }

  .detail-member-position {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 94rpx;
    height: 36rpx;
    margin: 0 auto 10rpx;
    border-radius: 18rpx;
    background-color: #eceefd;
  }

  .detail-member-position2 {
    flex-shrink: 0;
    width: 28rpx;
    height: 28rpx;
    margin-right: 6rpx;
  }

  .detail-member-position3 {
    min-width: 0;
    font-size: 20rpx;
    color: #2c5bf2;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-member-name {
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    text-align: center;
  }
}

.detail-data {
  .detail-data-title {
    padding-left: 30rpx;
    margin-bottom: 40rpx;
  }

  .detail-data-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    margin: 0 30rpx 20rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  .detail-data-content {
    flex-grow: 1;
    min-width: 0;
  }

  .detail-data-name {
    height: 84rpx;
    margin-bottom: 20rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-data-date {
    font-size: 24rpx;
    color: #bbbbbb;
    line-height: 34rpx;
  }

  .detail-data-img {
    flex-shrink: 0;
    width: 190rpx;
    height: 140rpx;
    margin-left: 30rpx;
    border-radius: 20rpx;
  }
}

.popup-member {
  position: relative;
  width: 484rpx;
  padding: 50rpx 40rpx 60rpx;
  border-radius: 40rpx;
  background-color: #ffffff;

  .popup-member-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
  }

  .popup-member-avatar {
    flex-shrink: 0;
    width: 132rpx;
    height: 132rpx;
    margin-right: 20rpx;
    border-radius: 30rpx;
  }

  .popup-member-name {
    margin-bottom: 10rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    font-weight: bold;
  }

  .popup-member-position {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 94rpx;
    height: 36rpx;
    border-radius: 18rpx;
    background-color: #eceefd;
  }

  .popup-member-position2 {
    flex-shrink: 0;
    width: 28rpx;
    height: 28rpx;
    margin-right: 6rpx;
  }

  .popup-member-position3 {
    min-width: 0;
    font-size: 20rpx;
    color: #2c5bf2;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .popup-member-title {
    display: flex;
    margin-bottom: 20rpx;
  }

  .popup-member-title2 {
    position: absolute;
    right: -4rpx;
    bottom: 0;
    width: 28rpx;
    height: 28rpx;
    border-radius: 50%;
    background: linear-gradient(148deg, rgba(255, 132, 31, 0) 0%, #ff841f);
  }

  .popup-member-title3 {
    position: relative;
    font-size: 30rpx;
    color: #2d2d2d;
    line-height: 42rpx;
    font-weight: bold;
  }

  .popup-member-intro {
    min-height: 192rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 48rpx;
  }

  .popup-member-close {
    position: absolute;
    left: 50%;
    bottom: -96rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    border: 2rpx solid #ffffff;
    background-color: rgba(0, 0, 0, 0.6);
    transform: translateX(-50%);
  }
}
</style>